<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>index</title>
	<meta name="author" content="Yehuda Katz">
	<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
	<script>
    $.iframeContents = function(name) {
      return $.browser.msie ? document.frames[name].document : document.getElementById(name).contentDocument;
    };
	
	  window.onload = function() {
	    $.iframeContents("editor").designMode = "on";
	    try { $.iframeContents("editor").execCommand('useCSS', false, false); } catch(ex) {}
	    try { $.iframeContents("editor").execCommand('styleWithCSS', false, false); } catch(ex) {}	    
	    $("button.command").click(function() {
	      $.iframeContents("editor").execCommand(this.name, false, false);
	    });
	    $("button.meta-command[@name=done]").click(function() {
	      alert($.iframeContents("editor").body.innerHTML);
	    });
	  };
	</script>
</head>
<body>
  <div>
    <button name="bold" class="command">Bold</button>
    <button name="italic" class="command">Italic</button>
    <button name="underline" class="command">Underline</button>
    <button name="done" class="meta-command">Done</button>
  </div>
  <iframe src="designmode.html" id="editor" designmode="on" />
</body>
</html>
